<template>
    <div>
        <el-dialog
            :visible.sync="show"
            :before-close="handleClose"
            title="添加课程"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="60%"
        >
            <div class="edu-page-warp">
                <div class="tips" v-if="titles">
                    （<span class="red">* 补修课只能是专业课</span>）
                </div>
                <ConditionCard
                    shadow="never"
                    body-style="padding: 24px 24px 6px 24px;"
                    @search="onSearch"
                    @reset="reset"
                >
                    <el-form
                        :model="queryCourseForm"
                        size="mini"
                        label-position="right"
                        label-width="80px"
                    >
                        <el-row :gutter="24" style="height: 50px;">
                            <el-col :span="8">
                                <el-form-item label="开课学院:">
                                    <el-select
                                        v-model="queryCourseForm.college"
                                        size="mini"
                                        style="width: 100%"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in options.faculty"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" v-if="isShow">
                                <el-form-item label="课程类别:">
                                    <el-select
                                        v-model="queryCourseForm.nature"
                                        size="mini"
                                        style="width: 100%"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in options.nature"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学期:">
                                    <el-select
                                        v-model="queryCourseForm.term"
                                        size="mini"
                                        style="width: 100%"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in options.term"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </ConditionCard>
                <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
                    <h1 class="condition-title">{{ $t('culture.course.course') }}</h1>
                    <div class="div-main clearfix">
                        <div class="float-left">
                            <el-input
                                v-model="queryCourseForm.condition"
                                type="text"
                                placeholder="课程名称或代码"
                                size="mini"
                                @keyup.enter.native="onSearch"
                            >
                                <i
                                    slot="suffix"
                                    class="el-icon-search"
                                    style="margin-top:7px;cursor: pointer;"
                                    @click="onSearch"
                                />
                            </el-input>
                        </div>
                    </div>
                    <el-table :data="courses" size="mini" @selection-change="chooseCourse">
                        <el-table-column type="selection" width="55"/>
                        <el-table-column width="120" label="课程代码" prop="code">
                            <!-- <template slot-scope="scope">
            <el-radio
              v-model="selectedCourseCode"
              :label="scope.row.code"/>
                            </template>-->
                        </el-table-column>
                        <el-table-column label="课程名称">
                            <template slot-scope="props">{{ props.row.name }}</template>
                        </el-table-column>
                        <el-table-column prop="college" label="开课院系"/>
                        <el-table-column prop="term" label="开课学期" width="80"/>
                        <el-table-column prop="nature" label="课程属性" width="80"/>
                        <el-table-column label="学分" width="50">
                            <template slot-scope="props">{{ props.row.credits }}</template>
                        </el-table-column>
                        <el-table-column label="课时" width="50">
                            <template slot-scope="props">{{ props.row.period }}</template>
                        </el-table-column>
                        <!-- <el-table-column
              prop="courseCode"
              label="跨院系"
              width="60">
              <template slot-scope="props">
                &nbsp;
              </template>
            </el-table-column>
            <el-table-column
              prop="courseCode"
              label="本研互选"
              width="80">
              <template slot-scope="props">
                &nbsp;
              </template>
                        </el-table-column>-->
                    </el-table>
                    <el-row>
                        <el-col>
                            <el-pagination
                                :current-page="queryCourseForm.pageNum_"
                                :page-size="queryCourseForm.pageSize_"
                                :total="queryCourseForm.total_"
                                layout="total,  prev, pager, next, jumper"
                                style="float:right;margin-top:10px"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            <span slot="footer">
                <div>
                    <el-button @click="closeDialog">{{ $t('message.cancel') }}</el-button>
                    <el-button type="primary" @click="confirmCourse">{{ $t('message.confirm') }}</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import UTILS from 'common/src/utils/utils';
import { queryCourseList, queryAddCourseList } from "common/src/api/courseTemplate";
import { queryDic } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import Bus from "common/src/utils/bus";
import mixin from 'common/src/mixins/index';
export default {
    mixins: [mixin],
    props: {
        show: {
            default: false, // 1为模板，2为方案
            type: Boolean
        },
        randomId: {
            default: 0,
            type: Number
        },
        labelId: {
            default: 0,
            type: Number
        },
        training: {
            default: 4,
            type: Number
        }
    },
    data() {
        return {
            queryCourseForm: {
                college: "",
                term: "",
                nature: "",
                condition: "",
                status: "3",
                pageSize_: 20,
                pageNum_: 1,
                managerDeptId:"",
                total_: 0
            },
            options: {
                faculty: [],
                nature: [],
                term: []
            },
            courses: [],
            titles:false,
            selectedCourseCode: "", // 选中课程编码
            selectedCourseName: "", // 选中课程名称
            checkedCourses: [], // 选择的课程
            isShow:true,
            categoryID:""
        };
    },
    mounted() {
        findFaculty().then(res => { 
            let data = {"X_YX": res.data};
            UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
        });
        const data = {
            lang: this.$store.getters.language || "cn",
            type: "allChild",
            keys: ["X_KCXZ", "X_KKXQ"]
        };
        queryDic(data)
            .then(res => {
                if (res.code == 200) {
                    this.loadOptions("nature", res.data.X_KCXZ);
                    this.loadOptions("term", res.data.X_KKXQ);
                }
            })
            .catch(err => {
                this.$message({
                    type: "error",
                    message: "获取筛选列表失败"
                });
            });
    },
    methods: {
        loadOptions(optionKey, dataObj) {
            for (const key in dataObj) {
                this.options[optionKey].push({
                    value: key,
                    label: dataObj[key]
                });
            }
        },
        // 获取课程列表
        getCourses(isFirstPage = false,categoryId) {
            this.queryCourseForm.managerDeptId=this.global.projectId;
            if (isFirstPage) {
                this.queryCourseForm.pageNum_ = 1;
            }
            if (this.$route.params.projId == 2) {
                this.queryCourseForm.schemeId = this.$route.params.id;
            }
            if(categoryId == 1070 || categoryId == 1581){
                 this.queryCourseForm.nature="2";
                 this.queryCourseForm.trainingLevel =this.training;
                this.isShow=false;
                queryAddCourseList(this.queryCourseForm) 
                .then(response => {
                    if (response.code == 200) {
                        this.courses = response.data.list;
                        this.queryCourseForm.total_ = response.data.total_;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询课程列表失败"
                    });
                });
            }else{
                if(!this.categoryID == 1070 || !this.categoryID == 1581){
                this.isShow=true;
                }
                if (this.isCompulsoryFlag(categoryId)) {
                    this.isShow = false;
                    this.queryCourseForm.nature= "3";
                }
                 queryCourseList(this.queryCourseForm)
                .then(response => {
                    if (response.code == 200) {
                        this.courses = response.data.list;
                        this.queryCourseForm.total_ = response.data.total_;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询课程列表失败"
                    });
                });
            }
        },
        // 课程查询条件重置
        reset() {
            this.queryCourseForm.college = "";
            this.queryCourseForm.term = "";
            if(this.isShow){
            this.queryCourseForm.nature = ""; 
            }
            this.queryCourseForm.condition = "";
            this.queryCourseForm.trainingLevel = "";
            this.selectedCourseCode = "";
            this.selectedCourseName = "";
        },
        // 课程查询
        onSubmit(categoryId) {
            if(categoryId == 1070 || categoryId == 1581){
                this.titles = true;
                this.categoryID=categoryId;
            }else{
                if (this.isCompulsoryFlag(categoryId)) {
                    this.categoryID = categoryId;
                }else {
                    this.categoryID="";
                }
            }
            this.selectedCourseCode = "";
            this.selectedCourseName = "";
            this.getCourses(true,this.categoryID);
        },
        isCompulsoryFlag(categoryId) {
            let flag = false;
            if (categoryId == 1578 || categoryId == 1067) {
                flag = true;
            }
            return flag;
        },
        onSearch(){
            this.onSubmit(this.categoryID);
        },
        // 课程查询翻页
        handleCurrentChange(val) {
            this.selectedCourseCode = "";
            this.selectedCourseName = "";
            this.queryCourseForm.pageNum_ = val;
            this.getCourses(false,this.categoryID);
        },
        // 课程查询页显示数量
        handleSizeChange(val) {
            this.queryCourseForm.pageSize_ = val;
             this.getCourses(this.categoryID);
        },
        // 确定课程
        confirmCourse() {
            if (this.checkedCourses.length === 0) {
                this.$message({
                    type: "info",
                    message: "请选择一门课程"
                });
                return;
            }

            Bus.$emit(this.randomId, false, this.checkedCourses);
            this.clean();
        },
        chooseCourse(val) {
            this.checkedCourses = val;
        },
        handleClose(done) {
            Bus.$emit(this.randomId, false);
            done();
            this.clean();
        },
        closeDialog() {
            Bus.$emit(this.randomId, false);
            this.categoryID="";
            this.clean();
        },
        clean() {
            this.courses = [];
            this.isShow=true;
            this.reset();
            this.labelId = ''
             this.titles = false
            this.queryCourseForm.pageNum_ = 1;
            this.queryCourseForm.total_ = 0;
        }
    }
};
</script>
<style scoped>
    .div-main {
        margin-bottom: 16px;
    }
    .tips{
        position: absolute; 
        top: 28px;
        left: 95px;
    }
    .red{
        vertical-align: middle;
        color: red
    }
</style>
